<template>
  <!-- 首页 -->
  <div>
    <!-- 个人中心 -->

    <div class="navbar navbar-default" id="navbar">
      <div class="navbar-container" id="navbar-container">
        <div class="navbar-header">
          <button
            style="display: none"
            class="navbar-toggle collapsed"
            type="button"
            data-toggle="collapse"
            data-target=".bs-navbar-collapse"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" style="font-size:18px" href="#">
            <i>
              <img id="logo" onerror="imgerror(this)" src="../assets/no.png" style="width:42px" />
            </i>
            <span>{{$t('ggxxfbpt')}}</span>
          </a>
          <!-- <input type="hidden"  id="languagetype" value="0"> -->
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
          <ul class="nav navbar-nav"></ul>

          <div
            class="navbar-header pull-right"
            role="navigation"
            style
            name="ydsb"
            id="Taskinformation"
          >
            <ul class="nav ace-nav" style="text-align:right">
              <li class="light-blue">
                <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                  <img class="nav-user-photo" src="../assets/user.jpg" alt />
                  <span class="user-info" style="line-height:15px">
                    <br />
                    <small id="usname" style="font-size:14px;">{{$t('hygl')}}</small>
                  </span>

                  <i class="icon-caret-down" style="display:"></i>
                </a>

                <ul
                  class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"
                >
                  <li>
                    <a href="#" id="uptataxg" data-target="#myModal" data-toggle="modal">
                      <i class="icon-cog"></i>
                      {{$t('xiugaimm')}}
                    </a>
                  </li>
                  <!--<li>
                                <a href="#">
                                    <i class="icon-user"></i>
                                    {{$t('gerenzil')}}
                                </a>
                  </li>-->
                  <li class="divider"></li>
                  <li>
                    <a href="#" id="Logout">
                      <i class="icon-off"></i>
                      {{$t('tuichu')}}
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
    <div class="main-container" id="main-container">
      <div class="main-container-inner">
        <a class="menu-toggler" id="menu-toggler" href="#">
          <span class="menu-text"></span>
        </a>
        <div class="sidebar" id="sidebar">
          <div style="display:none" id="sidebarbefore"></div>
          <div id="sgd" class="nui-scroll">
            <div class="sidebar-shortcuts" id="sidebar-shortcuts" style="display:none">
              <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
                <button class="btn btn-success">
                  <i class="icon-signal"></i>
                </button>
                <button class="btn btn-info">
                  <i class="icon-pencil"></i>
                </button>
                <button class="btn btn-warning">
                  <i class="icon-group"></i>
                </button>

                <button class="btn btn-danger">
                  <i class="icon-cogs"></i>
                </button>
              </div>

              <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
                <span class="btn btn-success"></span>

                <span class="btn btn-info"></span>

                <span class="btn btn-warning"></span>

                <span class="btn btn-danger"></span>
              </div>
            </div>
            <!-- #sidebar-shortcuts -->
            <div class="sidebar-collapse" id="sidebar-collapse">
              <i
                class="icon-double-angle-left"
                data-icon1="icon-double-angle-left"
                data-icon2="icon-double-angle-right"
              ></i>
            </div>
            <ul class="nav nav-list" id="menu">
              <li :title="$t('qyxmjfzlb')" id="company">
                <a href="#" class="dropdown-toggle">
                  <i class="icon-folder-open"></i>
                  <span class="menu-text">{{$t('qyxmjfzlb')}}</span>
                  <b class="arrow icon-angle-down"></b>
                </a>
                <div>
                  <ul id="treeDemo" style="overflow:auto;height:350px" class="ztree"></ul>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="main-content">
          <div style="background: gainsboro;width:100%;height: 36px;margin-bottom:3px;">
            <ul id="quickmenu" style="display: flex;font-size:16px">
              <li :title="$t('kj0_zdlb')">
                <a
                  href="#"
                >
                 <!-- href="javascript:addTabs({id:'20',title: '设备列表',close: true,url: '?#/page/Device/list'});" -->
                  <img src="static/img/set_index.jpg" class="img-rounded" />
                  <b>{{$t('kj0_zdlb')}}</b>
                </a>
              </li>
              <li :title="$t('kj1_bjjm')">
                <a
                  href="#"
                >
                  <img src="static/img/edit_index.jpg" class="img-rounded" />
                  <b>{{$t('kj1_bjjm')}}</b>
                </a>
              </li>
              <li :title="$t('kj2_fbgg')">
                <a
                  href="#"
                >
                  <img src="static/img/send.jpg" class="img-rounded" />

                  <b>{{$t('kj2_fbgg')}}</b>
                </a>
              </li>
              <li :title="$t('kj3_cssz')" style="display:none">
                <a
                  href="#"
                >
                  <img src="static/img/set2.jpg" class="img-rounded" />

                  <b>{{$t('kj3_cssz')}}</b>
                </a>
              </li>
            </ul>
          </div>

          <div id="tabs">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist" style="height:34px" id="tabSuperior">
              <li role="presentation" id="Firstactive" class="active">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">{{$t('shouye')}}</a>
              </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content" style="padding:5px 5px;">
              <div role="tabpanel" class="tab-pane active" id="home">
                <div class="breadcrumbs" id="breadcrumbs" style="display:none">
                  <ul class="breadcrumb">
                    <li>
                      <i class="icon-home home-icon"></i>
                      {{$t('shouye')}}
                    </li>
                    <li class="active">{{$t('kongzhit')}}</li>
                  </ul>
                </div>

                <iframe
                  id="iframescr"
                  name="iframescr"
                  src="#"
                  width="100%"
                  frameborder="no"
                  border="0"
                  marginwidth="0"
                  marginheight="0"
                  scrolling="yes"
                ></iframe>
              </div>
            </div>
            <!-- /.page-content -->
          </div>
          <!-- /.main-content -->
          <!-- 选择皮肤 -->
          <div class="ace-settings-container" id="ace-settings-container" style="top:0px;display:none">
            <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
              <i class="icon-cog bigger-150"></i>
            </div>
            <div class="ace-settings-box" id="ace-settings-box">
              <div>
                <div class="pull-left">
                  <select id="skin-colorpicker" class="hide">
                    <option data-skin="default" value="#438EB9">#438EB9</option>
                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                  </select>
                </div>
                <span>&nbsp; 选择皮肤</span>
              </div>

              <div>
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
                <label class="lbl" for="ace-settings-navbar">固定导航条</label>
              </div>

              <div>
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
                <label class="lbl" for="ace-settings-sidebar">固定滑动条</label>
              </div>

              <div>
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
                <label class="lbl" for="ace-settings-breadcrumbs">固定面包屑</label>
              </div>

              <div>
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
                <label class="lbl" for="ace-settings-rtl">切换到左边</label>
              </div>

              <div>
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
                <label class="lbl" for="ace-settings-add-container">
                  切换窄屏
                  <b></b>
                </label>
              </div>
            </div>
          </div>
          <!-- /#ace-settings-container -->
        </div>
        <!--<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
                <i class="icon-double-angle-up icon-only bigger-110"></i>
        </a>-->
      </div>
    </div>

    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      style="top:-35px"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">{{$t('xiugaimm')}}</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="firstname" class="col-sm-2 control-label">{{$t('yonghuming')}}</label>
                <div class="col-sm-10" style>
                  <input
                    type="text"
                    class="form-control"
                    maxlength="50"
                    value
                    id="loginname"
                    disabled="disabled"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">{{$t('yuanshimm')}}</label>
                <div class="col-sm-10">
                  <input
                    type="password"
                    class="form-control"
                    maxlength="50"
                    id="password"
                    onkeyup="value=value.replace(/[^\w]/g,'')"
                  />
                  <span style="color:red"></span>
                </div>
              </div>
              <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">{{$t('xinmima')}}</label>
                <div class="col-sm-10">
                  <input
                    type="password"
                    class="form-control"
                    maxlength="50"
                    id="password1"
                    onkeyup="value=value.replace(/[^\w]/g,'')"
                  />
                  <span style="color:red"></span>
                </div>
              </div>
              <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">{{$t('querenmm')}}</label>
                <div class="col-sm-10">
                  <input
                    type="password"
                    class="form-control"
                    maxlength="50"
                    id="password2"
                    onkeyup="value=value.replace(/[^\w]/g,'')"
                  />
                  <span style="color:red"></span>
                  <p style="color:brown">{{$t('mmyouszzm')}}</p>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" id="close" data-dismiss="modal">{{$t('guanbi')}}</button>
            <button type="button" class="btn btn-primary" id="add">{{$t('tijiao')}}</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
    <div class="modal fade" id="NoPermissionModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="NoPermissionModalLabel">{{$t('xitongxiaox')}}</h4>
          </div>
          <div class="modal-body">
            <iframe id="NoPermissioniframe" width="100%" height="100%" frameborder="0"></iframe>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{$t('guanbi')}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style >
@import "../../static/css/home/ace-rtl.min.css";
@import "../../static/css/home/ace-skins.min.css";
/* @import '../../static/css/home/bootstrap.min.css'; */
@import "../../static/css/home/bootstrap-addtabs.css";
@import "../../static/css/home/datepicker.css";
@import "../../static/css/home/jquery-ui-1.10.3.full.min.css";
@import "../../static/css/home/font-awesome.min.css";
@import "../../static/css/ztree/zTreeStyle.css";
@import "../../static/css/home/ace.min.css";

#quickmenu {
  /* margin:4px 10px 0px 219px; */

  font-family: Tahoma, Microsoft FangSong, 微软雅黑, 黑体;
}
#quickmenu li {
  list-style: none;
  padding: 4px 14px;
  /* width: 63px */
}
#quickmenu li a {
  /* color: white; */
}
#quickmenu li a img {
  width: 30px;
}

#quickmenu li a:hover {
  text-decoration: none;
}
</style>
<script>
import "../../static/js/home/jquery-1.8.2.min.js";
import "../../static/js/home/ace-elements.min.js";
import "../../static/js/home/ace-extra.min.js";

// import "../../static/js/home/bootstrap-addtabs.js";
require(localStorage.getItem("languageval") == "zh"
  ? "../../static/js/home/bootstrap-addtabs.js"
  : "../../static/js/home/bootstrap-addtabs-en.js");
// import '../../static/js/home/bootstrap.min.js';
import "../../static/js/home/bootstrap-tab-sidebar-menu.js";
import "../../static/js/home/bootstrap-datepicker.min.js";

import "../../static/js/home/hm.js";

import "../../static/js/home/jquery-ui-jqLoding.js";
import "../../static/js/home/jquery-ui.min.js";

//seajs.use("../../static/js/seajs/mysea.js?v=0.1");
import "../../static/js/home/typeahead-bs2.min.js";

import "../../static/js/home/ace.min.js";
require("../../static/js/home/index.js");

//多语言转换

// import"../common/language.js";


//import '../../static/js/home/index.js';
export default {
  data() {
    return {};
  },

  mounted() {
    /**
     * iframe-宽高自适应显示
     */

    //console.log($(".main-container-inner").height());
    sessionStorage.removeItem("Load");

    var oIframe = parent.document.getElementById("iframescr");
    // oIframe.src="?#/page/index";
    //$("#gbox_table_list_1")
    oIframe.src = "?#/page/Device/list";
    //  oIframe.src = "?#/page/Guide/guide";
    setTimeout(function() {
      if (
        parseInt(
          $("#iframescr")
            .contents()
            .find("#gbox_table_list_1")
            .width()
        ) < 500
      ) {
        // oIframe.cxlist();

        $("#iframescr")[0].contentWindow.cxlist();

        // oIframe.src="?#/page/Device/list"
      }
      // expirytime();
    }, 2000);
    var deviceWidth = document.documentElement.clientWidth;
    var deviceHeight = document.documentElement.clientHeight;

    //console.log(deviceHeight);

    //  oIframe.style.width = (Number(deviceWidth)-220) + 'px';

    oIframe.style.height = Number(deviceHeight) - 80 + "px";

    // alert(oIframe.style.height);
    MenuTree(0);
    //火狐浏览企业出不来，是加载被其他的抢先了，放这里，避免2次加载，之前iframe出不来也是这样

   
    // expirytime();
  },
  methods: {}
};
try {
  ace.settings.check("main-container", "fixed");
} catch (e) {}
try {
  ace.settings.check("sidebar", "fixed");
} catch (e) {}
try {
  ace.settings.check("sidebar", "collapsed");
} catch (e) {}
try {
  ace.settings.check("breadcrumbs", "fixed");
} catch (e) {}


 //指定多少毫秒无动作将跳转

    // window.expirytime = function() {
    //   var timeout = 1800000;
    //   //记录当前时间
    //   var occurtime = new Date().getTime();
    //   //更新最新动作时间
    //   document.onmousemove = function() {
    //     occurtime = new Date().getTime();
    //     console.log("移动了");
    //   };
    //   //监听键盘
    //   document.onkeydown = function() {
    //     occurtime = new Date().getTime();
    //     console.log("输入了");
    //   };
    //   try {
    //     var iframes = document.getElementsByTagName("iframe");
    //     for (var i = 0; i < iframes.length; i++) {
    //       iframes[i].contentWindow.document.onmousemove = function() {
    //         occurtime = new Date().getTime();
    //         console.log("输入了123");
    //       };
    //       iframes[i].contentWindow.document.onkeydown = function() {
    //         occurtime = new Date().getTime();
    //         console.log("输入了456");
    //       };
    //       iframes[i].contentWindow.document.onmousedown = function() {
    //         occurtime = new Date().getTime();
    //         console.log("输入了");
    //       };
    //       iframes[i].contentWindow.document.onkeydown = function() {
    //         occurtime = new Date().getTime();
    //         console.log("输入了");
    //       };
    //     }
    //   } catch (ex) {
    //     alert(ex);
    //   }
    //   //也可以用窗口失去焦点来更新时间
    //   //window.onblur=function(){
    //   //        occurtime=new Date().getTime() ;
    //   //}
    //   //判断无动作时间并跳转
    //   window.goUrl = function() {
    //     var a = parseInt(new Date().getTime() - occurtime);
    //     console.log(a);
    //     if (a > timeout) {
    //       //  window.location.href="http://www.baidu.com";
    //       $("#Logout").click();
    //     }
    //   };
    //   setInterval("goUrl()", 1000);
    // };
</script>
         
          
 <style type="text/css">
.nui-scroll {
  overflow: auto;
  overflow-x: hidden;
}
.nui-scroll::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
/*正常情况下滑块的样式*/
.nui-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/
.nui-scroll:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
/*鼠标悬浮在滑块上时滑块的样式*/
.nui-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
/*正常时候的主干部分*/
.nui-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: white;
}
/*鼠标悬浮在滚动条上的主干部分*/
.nui-scroll::-webkit-scrollbar-track:hover {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.01);
}
</style>